<template>
	
		<div class="dd-nav">
			<div class="qb">
				<a>全部</a>
			</div>
			
			<div class="daifukuan">
				<a>待付款</a>
			</div>
			
			<div class="daifahuo">
				<a>待发货</a>
			</div>
			
			<div class="daishouhuo">
				<a>待收货</a>
			</div>
			
			<div class="pingjia">
				<a>待评价</a>
			</div>
			
			<div class="tksh">
				<a>退款/售后</a>
			</div>
			
			<div class="close">
				<a>已完成/关闭</a>
			</div>
			<p class="huishouzhan">订单回收站</p>
		</div>
	
</template>

<script>
	export default {
		components: {

		},
		methods: {
			nav: function() {
				$(".dd-nav div").mouseover(function() {
					$(this).addClass("active").siblings().removeClass("active");
				});
			}
		},
		mounted: function() {
			this.nav();
		}

	}
</script>

<style scoped="scoped">
	.dd-nav {
		width: 1050px;
		height: 18px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 50px;
	}
	
	.dd-nav div {
		width: 123px;
		height: 18px;
		font-size: 16px;
		line-height: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		/*border: 1px solid red;*/
	}
	
	.dd-nav div>a {
		display: flex;
		justify-content: center;
		line-height: 16px;
		width: 123px;
		height: 16px;
		border-right: 1px solid #CCCCCC;
	}
	.huishouzhan{
		color: green;
	}
	.active {
		background: #f08200;
	}
	
	.active a {
		color: #FFFFFF;
	}
</style>